<template>
  <div style="width: 100%;height: calc(100vh - 100px)" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/components/Mixins/resize'
import { getBelongDeviceList } from '@/api/iot/iotDeviceBelongApi'
import { getCompanyId, getShortCompanyName } from '@/util/storage'
export default {
  name: 'Belong',
  mixins: [resize],
  props: {
    userName: {
      type: String,
      default: null
    },
    userId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      companyId: getCompanyId(),
      shortCompanyName: getShortCompanyName(),
      chartData: {}
    }
  },
  mounted() {
    this.getBelongDeviceList()
  },
  methods: {
    getBelongDeviceList() {
      getBelongDeviceList({
        userId: this.userId,
        fieldList: ['deviceCore']
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const companyData = {
            'name': this.userName,
            'children': []
          }
          const belongList = data
          belongList.forEach(belong => {
            companyData['children'].push({
              'name': belong.deviceCore
            })
          })
          this.chartData = companyData
          this.initChart()
        }
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        series: [
          {
            type: 'tree',
            symbol: 'emptyCircle',
            name: this.$t('param'),
            data: [this.chartData],
            top: '10%',
            bottom: '10%',
            symbolSize: 3,
            initialTreeDepth: 4,
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
